<template>
  <div>
    <div id="BI_chart3" class="BI_EchartFrame"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      BI_getSetOptionBar: {
        title: { text: '', left: 'center' },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            animation: false
          }
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          left: 10
        },
         axisLine:{//axisLine决定是否显示坐标刻度
           show:true
      },
      splitLine:{
            show:false
        },
        xAxis: {
          data: [],
          boundaryGap: true
        },
        yAxis: [
          {
            name: '',
            type: 'value',
            boundaryGap: [0, '100%'],
          },
          {
            name: '',
            type: 'value',
            scale: true
          }
        ],
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 20
          },
          {
            start: 0,
            end: 20
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#f3715c' },
                { offset: 0.5, color: '#aa2116' },
                { offset: 1, color: '#7a1723' }
              ]),

              barBorderRadius: 5
            },
            smooth: true,
            symbol: 'none',
            areaStyle: {},
            data: []
          },
          {
            name: '',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#102b6a'
              }
            },
            symbolSize: 8,
            yAxisIndex: 1,
            //smooth: true,
            symbol: 'none',
            data: []
          }
        ]
      },
      BI_chart3: null
    }
  },
  mounted() {
    this.BI_chart3 = echarts.init(document.getElementById('BI_chart3'))
    // this.drawBar()
  },
  methods: {
    /** 预构建柱状图框架 */
    //let option
    drawBar() {
      this.BI_chart3.clear()
      this.BI_getSetOptionBar.title.text = this.text;
      this.BI_getSetOptionBar.xAxis.data = this.value.xAxis;
      this.BI_getSetOptionBar.yAxis[0].name = this.yAxisNameBar;
      this.BI_getSetOptionBar.yAxis[1].name = this.yAxisNameLine;
      this.BI_getSetOptionBar.series[0].name = this.nameBar;
      this.BI_getSetOptionBar.series[0].data = this.value.yAxis;
      this.BI_getSetOptionBar.series[1].name = this.nameLine;
      this.BI_getSetOptionBar.series[1].data = this.value.yAxisLine
      this.BI_chart3.setOption(this.BI_getSetOptionBar)
      console.log('个人工资', this.BI_getSetOptionBar)
    }
  },
  props: {
    value: Object,
    text: String,
    yAxisNameBar: String,
    yAxisNameLine: String,
    nameBar: String,
    nameLine: String
  }
}
</script>

<style scoped>
.SP_EchartFrame {
  float: left;
  width: 1400px;
  height: 700px;
  border: 1px solid #fcfcfc;
}
.BI_EchartFrame {
  float: left;
  width: 1400px;
  height: 700px;
  border: 1px solid #fcfcfc;
}
</style>
